<template>
  <div class="group-item">
    <div class="icon">
      <icon-svg :icon-class="icon" />
    </div>
    <div class="text">{{text}}</div>
    <div v-if="arrow" class="arrow">
      <icon-svg icon-class="arrow" />
    </div>
    <slot v-else />
  </div>
</template>

<script>
export default {
  name: 'group-item',
  props: {
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: ''
    },
    arrow: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  .group-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    color: @color-text;
    .icon {
      margin-left: 12px;
      .icon-svg { font-size: @font-size-large-x }
    }
    .text {
      margin-left: 8px;
      flex: 1;
      text-align: left;
    }
    .arrow {
      margin-right: 8px;
      color: @color-text-ll;
      .icon-svg {
        font-size: @font-size-medium-x;
        transform: rotate(270deg)
      }
    }
  }
</style>
